$(function () {
  $.ajax({
    url: "../lib/goods.json",
    type: "get",
    dataType: "json",
    success: function (data) {
      var strDom = "";
      $.each(data, function (index, item) {
        item.id = index + 1;
        var goods = `
                <li>
                <a href="./detail.html?goodsId=${item.id}" >
                <div class="img">
                        <img src="${item.image}" alt="">
                </div>
                <div class="desc">
                    <span>${item.title}</span>
                </div>
                <div class="price">
                    <span>${item.price}</span>
                </div>
                <div data-id="${item.id}">
                
                </div>
                </a>
            </li>`;
        strDom += goods;
      });
      $(".goods > ul").html(strDom);
      // bindPagi()
    },
  });

  // const count = 25
  // const pagiBox = $('.pagi')

  // function bindPagi(count){

  //     const div = $('<div></div>')
  //     div.addClass('pagination')
  //     pagiBox.append(div)

  //     // new Pagination('.pagi > .pagination',{

  //     // })
  // }

  if (localStorage.getItem("goods")) {
    var goodsArr = JSON.parse(localStorage.getItem("goods"));
  } else {
    var goodsArr = [];
  }
  $(".goods > ul").on("click", "li > div", function () {
    var id = $(this).attr("data-id");
    console.log(id);
    var flag = false;
    $.each(goodsArr, function (index, item) {
      if (item.id === id) {
        item.num++;
        flag = true;
      }
    });
    if (!flag) {
      goodsArr.push({ id: id, num: 1 });
    }
    localStorage.setItem("goods", JSON.stringify(goodsArr));

  });
});

const pagiBox = document.querySelector(".pagi");

function bindPagi() {
  const div = document.createElement("div");
  div.className = "pagination";
  pagiBox.appendChild(div);

  new Pagination(".pagi > .pagination", {
    current: 1,
    pagesize: 20,
    total: 500,
    first: "首页",
    prev: "上一页",
    next: "下一页",
    last: "末页",
    go: "跳转",
    change(num) {
      console.log(num);
    },
  });
}
bindPagi();

$(function() {
  $('.gotop').click(() => {
    $('html').animate({
      scrollTop: 0
    },500)
  })
})